import React,{Component,Fragment} from 'react';
import ReactDOM from 'react-dom';
import './index.css'
// 创建context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext

//context主要用来祖孙组件传递数据，在应用开发中一般不用
//context只能用在类组件，consumer在类组件和函数组件中都可以用
// 函数组件
function A(){
	const [username,setUsername] = React.useState('tom')
	const [age,setAge] = React.useState(18)
	
	return(
		<div className="aBox">
			<div>我是A组件</div>
			<p>我是A组件用户名:{username},年龄是{age}</p>
			<Provider value={{username,age}}>
				<B></B>
			</Provider>
		</div>
	)		
}
// 类组件
// class A extends Component{
// 	state = {username:'tom',age:18}
// 	render(){
// 		const {username,age}= this.state
// 		return(
// 			<div className="aBox">
// 				<div>我是A组件</div>
// 				<p>我是A组件接收到的用户名:{username},年龄是{age}</p>
// 				<Provider value={{username,age}}>
// 					<B></B>
// 				</Provider>
// 			</div>
// 		)	
// 	}
// }
function B(){
	return(
		<div className="bBox">
			<div>我是B组件</div>
			<C></C>
		</div>
	)		
}
// 类组件
// class C extends Component{
// 	static contextType = MyContext//必须声明，this.context才会有值
// 	render(){
// 		const {username,age} = this.context
// 		return(
// 			<div className="cBox">
// 				<p>我是A组件接收到的用户名:{username},年龄是{age}</p>
// 			</div>
// 		)		
// 	}
	
// }
// 函数组件
function C(){
	return(
		<div className="cBox">
			<div>我是C组件</div>
			<p>我是A组件接收到的用户名:
				<Consumer>
					{value => `用户名是${value.username},年龄是${value.age}`}
				</Consumer>
			</p>
		</div>
	)		
}
export default A